<!--  -->
<template>
  <div class="drawing-box flex" ref="drawing">
    <vue-svg class="cursor-pointer center-box" @click="handleClick" :svg-string="backImg" :scale="scale" :max-zoom="1" :min-zoom="1" :svg-height="svgHeight" :svg-width="svgWidth" ref="vueSvg">
      <g slot="remark">
        <g v-for="assets in points" :key="assets.primaryKey">
          <image v-if="assets.positionX && assets.type && assets.type != 'isVacancy'" style="overflow: visible" width="15" height="15" :x="assets.iconPotionX" :y="(assets.positionY - 4) * 2" :xlink:href="assets.industryUrl || setIcon(assets.targetType) || iconUrl" class="quick-img font-size-s"></image>
          <text v-if="assets.positionX" @click="pointClick(assets)" :x="assets.positionX * 2" :y="assets.positionY * 2" text-anchor="left" dominant-baseline="middle" class="font-size-12 font-size-s">{{ assets.name }}</text>
          <text v-if="assets.positionX" @click="pointClick(assets)" :x="assets.positionX * 2" :y="(Number(assets.positionY) + 15) * 2 - 17" text-anchor="left" dominant-baseline="middle" class="font-size-12 font-size-s">{{ assets.leaserShopName }}</text>

          <text v-if="assets.positionX && assets.leaserShopName" @click="pointClick(assets)" :x="assets.positionX * 2" :y="(Number(assets.positionY) + 30) * 2 - 34" text-anchor="left" dominant-baseline="middle" class="font-size-12 font-size-s">{{ assets.buildingArea }}m²</text>
          <text v-if="assets.positionX && !assets.leaserShopName" @click="pointClick(assets)" :x="assets.positionX * 2" :y="(Number(assets.positionY) + 15) * 2 - 17" text-anchor="left" dominant-baseline="middle" class="font-size-12 font-size-s">{{ assets.buildingArea }}m²</text>

          <text v-if="assets.positionX && assets.leaserShopName" @click="pointClick(assets)" :x="assets.positionX * 2" :y="(Number(assets.positionY) + 45) * 2 - 51" text-anchor="left" dominant-baseline="middle" class="font-size-12 font-size-s">{{ assets.rentUnitPrice || 0 | fmoneyThousand }}元/m²/日</text>
          <text v-if="assets.positionX && !assets.leaserShopName" @click="pointClick(assets)" :x="assets.positionX * 2" :y="(Number(assets.positionY) + 30) * 2 - 34" text-anchor="left" dominant-baseline="middle" class="font-size-12 font-size-s">{{ assets.rentUnitPrice || 0 | fmoneyThousand }}元/m²/日</text>
        </g>
      </g>
    </vue-svg>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import $ from 'jquery';
  export default {
    //接收参数
    props: {
      points: {
        type: Array,
        default: () => {
          return [];
        },
      },
      backImg: {
        type: String,
        default: '',
      },
      svgHeight: {
        type: Number,
        default: 800,
      },
      svgWidth: {
        type: Number,
        default: 800,
      },
    },
    data() {
      return {
        // svgWidth: null,
        scale: 1,
        iconUrl: require('@/common/imgs/yetai.png'),
        cangkuUrl: require('@/common/imgs/cangku.png'),
        xiezilouUrl: require('@/common/imgs/xiezilou.png'),
      };
    },

    watch: {
      points: {
        deep: true,
        handler(list) {
          this.bindDataId(list);
        },
      },
    },
    //方法集合
    methods: {
      pointClick(pointDetail) {
        this.$emit('pointClick', pointDetail);
      },
      //更新图纸后绑定data-id 和颜色
      bindDataId(spaceList) {
        let colorObj = {};
        spaceList.forEach(item => {
          item.positionX = Number(item.positionX);
          item.iconPotionX = (Number(item.positionX) - 15 + 3) * 2; //（图片的x坐标 = 文字的坐标 - 图片的宽度(15) + 3px的padding） * scale的倍数
          // item.positionShopX = Number(item.positionX) * 2 + item.name.length * 7 + 5;
          // item.iconPotionX = item.positionX - 15 - 3; //图片的x坐标 = 文字的坐标 - 图片的宽度(15) - 3px的padding
          if (item.positionX && item.positionX != 0) {
            colorObj[item.code] = item.color || '#F1F1F1';
          }
        });
        this.$nextTick(() => {
          this.$refs.vueSvg.setFillColorByDataIdColorMap(colorObj);
        });
      },
      //点击图纸
      handleClick(e) {
        let dataId = e.target.dataset.id;
        if (dataId) {
          this.points.forEach(item => {
            if (dataId == item.code) {
              item.points = $(e.target).attr('points');
              this.pointClick(item);
            }
          });
        }
      },
      setScale() {
        let windowWidth = document.body.offsetWidth;
        // if (windowWidth <= 1440) {
        this.scale = 1;
        // } else if (1440 < windowWidth && windowWidth <= 1920) {
        //   this.scale = 1.3;
        // }
      },
      //根据类型设置写字楼图标
      setIcon(type) {
        if (type == 8) {
          return this.cangkuUrl;
        } else if (type == 3) {
          return this.xiezilouUrl;
        } else {
          return '';
        }
      },
    },
    mounted() {
      this.setScale();
      // this.svgWidth = this.$refs.drawing.clientWidth;
      this.bindDataId(this.points);
    },
  };
</script>
<style scoped lang="scss">
  .drawing-box {
    margin: 0 auto;
    // overflow: hidden;
    overflow-x: auto;
    position: relative;
    .left-box {
      width: 1100px;
      .cmd-pic {
        width: 100%;
        pointer-events: none;
      }
    }
    .drag-box {
      position: absolute;
    }
    .right-box {
      overflow-y: auto;
      background: #ffffff;
      // background: linear-gradient(to right, rgb(255, 255, 255), rgb(135, 138, 135), rgb(19, 18, 19));
    }
    .quick-img {
      width: 16px;
      height: 16px;
    }
    .font-size-s {
      transform: scale(0.5, 0.5);
    }
    .center-box {
      margin: 0 auto;
      width: 100%;
      text-align: center;
    }
  }
  .drawing-box::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px !important; /*高宽分别对应横竖滚动条的尺寸*/
    height: 7px !important;
  }
  .drawing-box::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px !important;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    background: #535353 !important;
  }
  .drawing-box::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    border-radius: 10px !important;
    background: #ededed !important;
  }
</style>
